<template>
    <div class="searchTop">
        <div class="search-return iconfont" @click="$router.go(-1)">&#xe625;</div>
        <input type="text" placeholder="陈奕迅" v-model="searchKey" @keydown.enter="enterKey">
    </div>
    <div class="searchHistory">
        <svg class="icon searchIcon" aria-hidden="true">
            <use xlink:href="#icon-liebiao"></use>
        </svg>
        <span class="searchSpan iconfont">历史</span>
        <span v-for="item in keyWorldList" :key="item" class="spanKey" @click="searchHistory(item)">
            {{item}}
        </span>
        <div class="deleteSearch iconfont" @click="delHistory">&#xe600;</div>
    </div>
    <div class="itemList-songs" v-for="(item,i) in searchList" :key="i" @click="updateIndex(item)">
        <div class="songs-id">{{i+1}}</div>
        <div class="songs-content">
            <div class="songs-name">{{item.name}}</div>
            <span class="songs-author" v-for="(item1,index) in item.artists" :key="index">{{item1.name}}</span>
        </div>
        <div class="iconfont songs-mv" v-if="item.mvid != 0">&#xe637;</div>
        <div class="iconfont songs-list">&#xea72;</div>
    </div>
</template>

<script>
import { getSearchList } from '@/request/api/home.js'
import { mapMutations } from 'vuex'
export default {
    data() {
        return {
            keyWorldList: [],
            searchKey: "",
            searchList: {}
        };
    },
    mounted() {
        this.keyWorldList = JSON.parse(localStorage.getItem('keyWorldList')) || []
    },
    methods: {
        enterKey:async function () {
            if (this.searchKey !== "") {
                this.keyWorldList.unshift(this.searchKey);
                this.keyWorldList = [...new Set(this.keyWorldList)]//数组去重
                if (this.keyWorldList.length > 4) {
                    this.keyWorldList.splice(this.keyWorldList.length - 1, 1);
                }
                localStorage.setItem("keyWorldList", JSON.stringify(this.keyWorldList))
                let res = await getSearchList(this.searchKey)
                console.log(res)
                this.searchList = res.data.result.songs
                this.searchKey = "";
            }  
        },
        delHistory: function () {
            localStorage.removeItem("keyWorldList")
            this.keyWorldList = []
        },
        searchHistory:async function (item) {
            let res = await getSearchList(item);
            this.searchList = res.data.result.songs;
            console.log(res);
        },
        updateIndex: function (item) {
            item.al = item.album
            item.al.picUrl = item.album.artist.img1v1Url
            this.$store.commit('pushPlayList', item)
            this.$store.commit('updatePlayListIndex',this.$store.state.playList.length -1)
        },
    }
}
</script>

<style lang="less" scoped>
.searchTop{
    display: flex;
    width: 100%;
    height: 1rem;
    padding:0 .3rem;
    align-items: center;
    .search-return{
        font-size: .5rem;
    }
    input{
        margin-left: .4rem;
        border: none;
        border-bottom: .01rem solid #999;
        width: 90%;
        padding: 5px;     
    }
}
.searchHistory{
    display: flex;
    position: relative;
    width: 100%;
    padding: .2rem;
    .searchIcon{
        margin-top: .1rem;
        font-size: .4rem;
    }
    .searchSpan{
        font-weight:700;
        font-size: .4rem;
    }
    .spanKey{
        display: inline-block;
        margin-left: .1rem;
        padding: .1rem .2rem;
        background-color: #ccc;
        border-radius: .4rem;
        font-size: .25rem;
    }
    .deleteSearch{
        position: absolute;
        top: .25rem;
        right: .3rem;
        font-size: .5rem;
    }
}
.itemList-songs{
        display: flex;
        position: relative;
        width: 100%;
        padding:0;
        margin-top: .2rem;
        height: 1.6rem;
        .songs-id{
            width: 5%;
            margin: .3rem .3rem;
            color:grey;
            font-size: .35rem;
        }
        .songs-content{
            margin-top: .3rem;
            width: 65%;
            .songs-name{
                font-size: .33rem;
                font-weight: 700;
            }
            .songs-author{
                display: inline-block;
                margin-top: .1rem;
                padding-right: .1rem;
                font-size: .25rem;
                color:grey;
            }
        }
        .songs-mv{
            width: 8%;
            margin: .2rem 0;
            color:grey;
            font-size: .45rem;
        }
        .songs-list{
            position: absolute;
            top: .2rem;
            right: .25rem;
            color:grey;
            font-size: .45rem;
        }
    }
</style>

